import type {
    FormItemProps,
    InputNumberProps,
    InputProps,
    SelectProps,
    CheckboxProps,
    TreeSelectProps,
    DatePickerProps
} from 'naive-ui'
import { RadioGroupProps } from './components/RadioGroup.vue'
import { CheckboxGroupProps } from './components/CheckboxGroup.vue'
import { UploadImageProps } from '../upload/types'
import { type VmEditorProps, type TinymceEditorProps } from '../editor'

export type FormStateType = Record<string, any>

// 定义 ComponentType 枚举类型，同时导出对应的字符串字面量类型
export const ComponentTypeEnum = {
    Input: 'Input',
    InputNumber: 'InputNumber',
    Select: 'Select',
    RadioGroup: 'RadioGroup',
    Checkbox: 'Checkbox',
    CheckboxGroup: 'CheckboxGroup',
    TreeSelect: 'TreeSelect',
    UploadImage: 'UploadImage',
    DatePicker: 'DatePicker',
    VmEditor: 'VmEditor',
    TinymceEditor: 'TinymceEditor'
} as const

export type ComponentType = keyof typeof ComponentTypeEnum

// 使用枚举类型的映射
export type ComponentTypeMap = {
    [ComponentTypeEnum.Input]: InputProps
    [ComponentTypeEnum.InputNumber]: InputNumberProps
    [ComponentTypeEnum.Select]: SelectProps
    [ComponentTypeEnum.RadioGroup]: RadioGroupProps
    [ComponentTypeEnum.Checkbox]: CheckboxProps
    [ComponentTypeEnum.CheckboxGroup]: CheckboxGroupProps
    [ComponentTypeEnum.TreeSelect]: TreeSelectProps
    [ComponentTypeEnum.UploadImage]: UploadImageProps
    [ComponentTypeEnum.DatePicker]: DatePickerProps
    [ComponentTypeEnum.VmEditor]: VmEditorProps
    [ComponentTypeEnum.TinymceEditor]: TinymceEditorProps
}

// 更新 ItemFieldConfig 类型
export type ItemFieldConfig<T, CT extends ComponentType> = FormItemProps & {
    label: string
    field: keyof T
    component: CT
    props: ComponentTypeMap[(typeof ComponentTypeEnum)[CT]]
}

// 为每个表单项类型定义具体的配置类型
export type InputFieldConfig<T> = ItemFieldConfig<T, 'Input'> & {
    props: InputProps
}
export type InputNumberFieldConfig<T> = ItemFieldConfig<T, 'InputNumber'> & {
    props: InputNumberProps
}
export type SelectFieldConfig<T> = ItemFieldConfig<T, 'Select'> & {
    props: SelectProps
}
export type RadioGroupFieldConfig<T> = ItemFieldConfig<T, 'RadioGroup'> & {
    props: RadioGroupProps
}
export type CheckboxFieldConfig<T> = ItemFieldConfig<T, 'Checkbox'> & {
    props: CheckboxProps
}
export type CheckboxGroupFieldConfig<T> = ItemFieldConfig<
    T,
    'CheckboxGroup'
> & {
    props: CheckboxGroupProps
}
export type TreeSelectFieldConfig<T> = ItemFieldConfig<T, 'TreeSelect'> & {
    props: TreeSelectProps
}

export type UploadImageFieldConfig<T> = ItemFieldConfig<T, 'UploadImage'> & {
    props: UploadImageProps
}

export type DatePickerFieldConfig<T> = ItemFieldConfig<T, 'DatePicker'> & {
    props: DatePickerProps
}

export type VmEditorFieldConfig<T> = ItemFieldConfig<T, 'VmEditor'> & {
    props: VmEditorProps
}

export type TinymceEditorFieldConfig<T> = ItemFieldConfig<
    T,
    'TinymceEditor'
> & {
    props: TinymceEditorProps
}

export type FormItemsConfig<T extends object> = (
    | InputFieldConfig<T>
    | InputNumberFieldConfig<T>
    | SelectFieldConfig<T>
    | RadioGroupFieldConfig<T>
    | CheckboxFieldConfig<T>
    | CheckboxGroupFieldConfig<T>
    | TreeSelectFieldConfig<T>
    | UploadImageFieldConfig<T>
    | DatePickerFieldConfig<T>
    | VmEditorFieldConfig<T>
    | TinymceEditorFieldConfig<T>
)[]

export type FormDesignItem = {
    type: Exclude<
        ComponentType,
        'Checkbox' | 'TreeSelect' | 'DatePicker' | 'VmEditor'
    >
    label: string
    key: string
    rule?: string
    props?: string
}
